<template>
  <div id="position-container">
    <div class="position-box">
      <!-- head return-->
      <div class="position-head">
        <van-nav-bar title="选择城市">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="$router.push('/home')" />
          </template>
          <template #right>
            <van-icon name="search" size="24" color="black" @click="show=true" />
          </template>
        </van-nav-bar>
      </div>
      <van-button type="primary" @click="initPosition" block>
        <van-icon name="location" />
        <span>{{$t('m.home.current') + ':' + ' ' + nowPositong.nowAddress}}</span>
      </van-button>

      <!-- 全国城市列表 -->
      <div class="list-box">
        <div class="city-list">
          <van-index-bar :index-list="indexList" :sticky-offset-top="60" :sticky="false" highlight-color="orange"
            @change="sendIndex">
            <div v-for="(item, i) in citysList" :key="i">
              <van-index-anchor :index="item.title" />
              <van-cell :title="text" v-for="(text, k) in item.lists" :key="k" @click="selectCity(text)" />
            </div>
          </van-index-bar>
        </div>
      </div>
      <div id="temp" style="display: none;"></div>
    </div>

    <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }">
      <!-- 定位城市搜索页面头部 搜索、定位栏 -->
      <div class="search-box">
        <input class="searchPosition" type="text" v-model="searchValue" @keyup="searchPosition(searchValue)"
          :placeholder="$t('m.home.address')" />
      </div>

      <!-- 搜索地址列表(条件显示) -->
      <div class="address-list">
        <div class="address-item" @click.stop="changePosition(item)" v-for="item in addressData" :key="item.id">
          <div class="address-title">{{item.name}}</div>
          <div class="address-text">{{item.pname}}{{item.cityname}}{{item.adname}}{{item.address}}</div>
        </div>
      </div>
      <van-empty description="列表为空" v-if="addressData.length===0" />
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      show: false,
      // 搜索地址数据
      addressData: [],
      searchValue: '',
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z']
    }
  },
  // 初始化定位、全国城市列表
  created() {
    this.$store.dispatch('getCityList')
  },
  // 获取定位、全国列表数据
  computed: {
    ...mapState(['citysList', 'nowPositong'])
  },
  watch: {
    searchValue(val) {
      if (val === '') {
        this.addressData = []
      }
    }
  },
  methods: {
    // 搜索全国地址 AMap 请求
    searchPosition(val) {
      axios({
        method: 'GET',
        url: 'https://restapi.amap.com/v3/place/text?parameters',
        params: {
          key: '8857783cc0db9ee595f99da7893d2e56',
          keywords: val,
          types: '',
          city: '',
          offset: 15,
          page: 1
        }
      }).then(result => {
        if (result.status === 200) {
          var arr = result.data.pois
          if (arr !== undefined) {
            this.addressData = arr
          }
        } else {
          this.$notify({ type: 'danger', message: '搜索失败，请刷新后重试' })
        }
      })
    },
    // 重置当前定位
    initPosition() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 300
      })
      this.$store.commit('changePositionMode', false)
      this.$store.dispatch('getNowPosition')
      setTimeout(() => {
        this.$router.push('/home/homepage')
      }, 300)
    },
    // 手动更改定位
    changePosition(val) {
      var nowAddress = val.pname + val.cityname + val.adname + val.address
      var detailInfo = val
      var position = val.location
      this.$store.commit('changePositionMode', true)
      this.$store.commit('changePosition', { nowAddress: nowAddress, detailInfo: detailInfo, position: position })
      this.$router.push('/home/homepage')
    },
    // 手动选择城市列表数据
    selectCity(city) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 450
      })
      this.searchPosition(city)
      setTimeout(() => {
        var item = this.addressData
        if (item.length === 0) {
          this.$toast.fail('加载失败')
        } else {
          this.changePosition(item[0])
        }
      }, 450)
    },
    sendIndex(index) {
      this.$toast(index)
    }
  }
}
</script>

<style lang="less" scoped>
.position-box {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  .position-head {
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  .list-box {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 90px;
    margin-top: 0.3em;
    .city-list {
      overflow: hidden;
      position: absolute;
      width: 97%;
      border-radius: 9px;
      background-color: white;
      /deep/.van-index-anchor {
        background: #f5f5f5;
      }
      .van-cell {
        width: 100%;
        height: 40px;
        line-height: 36px;
        .van-cell__title {
          display: flex;
          align-items: center;
          color: #454545;
        }
      }
    }
  }
  .van-button {
    position: fixed;
    width: 80%;
    height: 30px;
    top: 60px;
    border-radius: 15px;
    z-index: 1;
    background-color: orange;
    border: none;
    opacity: 0.9;
    .van-icon-location {
      line-height: 30px;
      width: 10%;
      color: white;
      font-size: 1.4em;
    }
    span {
      overflow: hidden;
      width: 90%;
      line-height: 30px;
      white-space: nowrap;
      text-align: center;
      color: white;
      text-overflow: ellipsis;
    }
  }
}
.van-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  .search-box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: white;
    z-index: 1;
    .searchPosition {
      width: 80%;
      height: 33px;
      border-radius: 12px;
      text-indent: 0.6em;
      border: none;
      background-color: whitesmoke;
      color: #636363;
      font-size: 0.9em;
    }
  }
  .address-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 50px;
    width: 100%;
    height: 100%;
    margin-top: 0.3em;
    .address-item {
      width: 90%;
      height: 100%;
      border-bottom: 0.06em solid #f0f0f0;
      .address-title {
        color: #666666;
        margin-top: 0.3em;
      }
      .address-text {
        font-size: 0.8em;
        color: #ffb44d;
        margin-bottom: 0.36em;
        margin-top: 0.3em;
      }
    }
  }
}
</style>
